<template>
  <div>
    <div class="common_bg"></div>
    <div class="personCenter_container">
      <ul class="list">
        <li class="item"><span class="item_title">登录账号</span><span class="item.text">{{personInfo.accountName}}</span></li>
        <li class="item"><span class="item_title">电话</span><span class="item.text">{{personInfo.phone}}</span></li>
        <li class="item"><span class="item_title">员工姓名</span><span class="item.text">{{personInfo.employeesName}}</span></li>
        <li class="item"><span class="item_title">入职日期</span><span class="item.text">{{personInfo.entryTime}}</span></li>
        <li class="item"><span class="item_title">工号</span><span class="item.text">{{personInfo.workNo}}</span></li>
        <!-- <li class="item"><span class="item_title">角色</span><span class="item.text">{{personInfo.}}</span></li> -->
        <li class="item"><span class="item_title">性别</span><span class="item.text">{{personInfo.sex == 1 ? '男' : '女'}}</span></li>
        <li class="item"><span class="item_title">职级</span><span class="item.text">{{personInfo.rankName}}</span></li>
        <li class="item"><span class="item_title">昵称</span><span class="item.text">{{personInfo.nickName}}</span></li>
      </ul>

      <ul class="list" v-for="(item, index) in personInfo.bmEmployeesDto" :key="index">
        <li class="item"><span class="item_title">校区</span><span class="item.text">{{item.schoolName}}</span></li>
        <li class="item"><span class="item_title">职位</span><span class="item.text">{{item.positionName}}</span></li>
        <li class="item"><span class="item_title">角色</span><span class="item.text">{{item.roleName}}</span></li>
      </ul>

      <div class="qr_box">
        <span>购课二维码:</span>
        <img :src="buyClassQrCode" alt="">
      </div>
    </div>
  </div>
</template>


<style scoped>
.qr_box {
  color: #303133;
  display: flex;
  align-items: flex-start;
  font-size: 14px;
}
.personCenter_container {
  padding-top: 1rem;
  position: relative;
}

.list {
  background: #fff;
  margin-bottom: .266667rem;
}

.list .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 1.2rem;
  font-size: .373333rem;
  color: #666666;
  padding: 0 .4rem;
}
.list .item:not(:last-child) {
  border-bottom: .5px solid #E9E9E9;
}
</style>

<script>
import {
  createNamespacedHelpers
} from "vuex";
let {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("adminBasic");
export default {
  name: 'personCenter',
  data() {
    return {
      accountId: '',
      personInfo: {},
      buyClassQrCode: '',
    }
  },
  created() {
    this.accountId = this.$route.params.id
    this.initData();
  },
  methods: {
    ...mapActions([
      "formGet",
      "post"
    ]),

    initData() {
      let data = {
        id: this.accountId
      }

      this.formGet({
        API: 'selectById',
        data: data
      }).then(res => {
        this.personInfo = res;
        this.buyClassQrCode = `http://qr.liantu.com/api.php?&w=230&logo=http://www.mingxiaoclub.cn/zebraOnline/img/icon_share.png&text=http://www.mingxiaoclub.cn/paymentSys/%23/home?createBy=${this.personInfo.employeesId}`
        console.log(res);
      })
    }
  }
}
</script>